import React, { memo, useEffect } from "react";

import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { RzSinger } from "./style";

import { getSizeImage } from "@/utils/format-utils";

import { getSingerList } from "../../store/actionType";
import { NavLink } from "react-router-dom";

export default memo(function Singer() {
  const dispatch = useDispatch();

  const state = useSelector(
    (state) => ({
      singerList: state.getIn(["recommend", "singerList"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getSingerList());
  }, [dispatch]);

  return (
    <RzSinger>
      <div className="rz-top">
        <span>入驻歌手</span>
        <NavLink
          to={{
            pathname: "/discover/artist",
          }}
        >
          查看全部
        </NavLink>
      </div>
      <div className="rz-box">
        <ul>
          {state.singerList.slice(0, 5).map((item, index) => {
            return (
              <li key={item.picUrl}>
                <NavLink
                  to={{
                    pathname: "/artist",
                    search: "?id=" + item.id,
                  }}
                >
                  <img src={getSizeImage(item.picUrl, 62)} alt="" />
                  <span>{item.name}</span>
                </NavLink>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="wy-music-btn">
        <button className="sprite_button">申请成为网易音乐人</button>
      </div>
    </RzSinger>
  );
});
